<template>
  <screen-cell :title="'单位基础信息'">
    <div class="container">
      <div class="sidebar fy-flex fy-flex__center fy-flex__column">
        <div class="cell">
          <screen-title :title="'接入单位总数'"></screen-title>
          <p>317<span>处</span></p>
        </div>
        <div class="cell">
          <screen-title :title="'救援力量总数'"></screen-title>
          <p>417<span>处</span></p>
        </div>
      </div>
      <div class="content">
        <div class="cell" v-for="(item, index) in list" :key="index">
          <div class="fy-flex fy-flex__center">
            <img src="../../assets/screen/icon_locat.png"/>
            <p class="title">{{item.title}}</p>
          </div>
          <p class="data">{{item.num}}</p>
        </div>
      </div>
    </div>
  </screen-cell>
</template>
<script>
import ScreenCell from "@/components/common/ScreenCell.vue";
import ScreenTitle from "@/components/common/ScreenTitle.vue";
export default {
  // 全局感知
  name: "",

  // 模板依赖
  components: {
    ScreenCell,
    ScreenTitle
  },
  filters: {},

  // 接口
  props: {},

  // 本地状态
  data() {
    return {
      list: [
        {
          title: "公共建筑",
          num: 52
        },
        {
          title: "居住建筑",
          num: 52
        },
        {
          title: "工业建筑",
          num: 52
        },
        {
          title: "九小场所",
          num: 145
        },
        {
          title: "消防站",
          num: 145
        },
        {
          title: "微型消防站",
          num: 145
        }
      ]
    };
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {}
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 25.5vh;
  .sidebar {
    float: left;
    width: 35%;
    height: 100%;
    color: white;
    .cell {
      margin-top: 2%;
      margin-bottom: 2%;
    }
    p {
      font-weight: 900;
      font-size: 3rem;
    }
    span {
      margin-left: 0.5rem;
      font-size: 2.5rem;
    }
  }
  .content {
    position: relative;
    float: left;
    width: 65%;
    height: 100%;
    .cell {
      float: left;
      margin-top: 4%;
      margin-left: 2%;
      width: 30%;
      height: 35%;
      border-radius: 1rem;
      border: 0.1rem solid #2968f6;
      box-sizing: border-box;
      div {
        height: 55%;
        img {
          margin-right: 0.8rem;
          height: 2rem;
        }
        h3 {
          font-size: 2rem;
        }
      }
      .title {
        color: #f1e87c;
        font-size: 2rem;
      }
      .data {
        font-weight: 900;
        color: white;
        font-size: 2.5rem;
      }
    }
  }
}
</style>
